<template>
  <view>
    
    
    
    <view class="color-box">
      <view class="img-box">
        <view class="img-box-money">￥{{salary | decimalFormat}}</view>
      </view>
      <view class="xiugai">{{year}}年{{month}}月薪资</view>
    </view>
    
    <view class="info-pos">
      <view class="info"><view class="info-box">基本工资</view><text>+{{basePay | decimalFormat }}</text></view>
      <view class="info"><view class="info-box">加班工资</view><text>+{{overtimeWage | decimalFormat }}</text></view>
      <view class="info"><view class="info-box">应发工资</view><text>+{{salary | decimalFormat}}</text></view>
      <view class="info" style="border-bottom: 0px;">
        <view class="info-box" style="color: #24243F; font-size: 32rpx; font-weight: 500;">来源工地</view>
        <text  style="color: #24243F; font-size: 32rpx; font-weight: 500;">{{salaryWhere}}</text>
      </view>
    </view>
    
    <view class="upload" v-if="isAffirm == 'false'">
      <button class="upload-but" type="primary" @click="navTo">确认</button>
    </view>
    
  </view>
</template>

<script>
import upload from '../../../uni_modules/uview-ui/libs/config/props/upload';
  import { Decimal } from 'decimal.js';
  export default {
    data() {
      return {
        basePay: 0.00 ,//基本工资
        overtimeWage: 0.00 ,//加班工资
        salaryId: null,
        objectName: '',
        userId: null ,
        salaryWhere: '未知来源',
        isAffirm: false,
        year: 2022,
        month: 10,
        salary: 0, //应发id
      };
    },
    computed:{
      
    },
    created() {
      this.userId = uni.getStorageSync('userId')
      console.log('userId: ' + this.userId);
      // uni.showLoading({
      //   title: '加载数据中',
      // })
      
    },
    methods:{
      getSalaryList(id){
        let salaryArray = uni.getStorageSync('salaryArray')
        console.log('salaryArray',salaryArray);
        salaryArray.forEach(item => {
          if(item.id == id){
            console.log('item',item);
            this.basePay = item.salaryBase
            console.log('基础工资',item.salaryBase);
            this.overtimeWage = item.salaryAdd
            console.log('加班工资',item.salaryAdd);
              const num1 = new Decimal(this.basePay); //基础工资
              const num2 = new Decimal(this.overtimeWage); //加班工资
              this.salary = num1.plus(num2)
              console.log('this.salary',this.salary.toNumber());
              this.salaryWhere = item.salaryWhere
          }
        })
        
      },
      navTo(){
        uni.redirectTo({
          url: './face?salaryId=' + this.salaryId
        })
      },
	  upload(){
		  
	  }
    },
    onLoad(options) {
      this.salaryId = options.id
      this.getSalaryList(this.salaryId)
      console.log(options);
      this.isAffirm = options.isAffirm
      console.log('this.isAffirm',this.isAffirm);
    },
    
  }
</script>

<style lang="scss">
  
.upload{
    position: fixed;
    width: calc(100% - 60rpx);
    left: 30rpx;
    bottom: 30rpx;
    .upload-but{
      background-color: #055dfe;
      width: 100%;
    }
  }
  
.color-box{
		position: relative;
		width: 100%;
		height: 381rpx;
		// background-color: #2f67ff;
    background: url('/static/images/222.png');
    background-color: #487DE5;
		border-radius: 0 0 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.img-box{
      .img-box-money{
        color: white;
        font-size: 60rpx;
      }
		}
		.xiugai{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #D3E2FF;
		}
	}
	.info-pos{
    box-shadow: 0rpx 3rpx 24rpx 1rpx rgba(5, 93, 254, 0.19);
		position: absolute;
		top: 270rpx;
		width: 95%;
		left: 2.5%;
		margin: 0rpx auto;
		background: white;
		border-radius: 10px 10px 10px 10px;
    padding: 30rpx 0;
		.info{
      flex: 1;
			margin: 0 auto;
			display: flex;
			width: 95%;
			height: 40px;
			align-items: center;
			border-bottom: 1px solid #c8c8c8;
      padding: 10rpx 0;
      justify-content: space-between;
      font-size: 36rpx;
			input{
				margin-left: 20px;
				width: calc(100% - 70px);
				color: black;
			}
			.info-box{
        flex: 1;
				width: 60px;
				font-size: 14px;
				color: #afafaf;
			}
			
		}
	}
</style>
